<template>
  <view class="content-page">
	<view :style="{
			  height: CustomBarRpx + 'rpx',
			  paddingTop: StatusBarRpx + 'rpx',
		}">
		<view :style="{ height: CustomBarRpx + 'rpx' }" class="header-nav">
			<u-icon name="close" @click="close"></u-icon>
		</view>
    </view>
    <view class="login-content" :style="{ height: 'calc(100% - ' + CustomBarRpx + 'rpx)' }">
		<div class="login-content-0">
			<view class="login-content-1">
				  <logo></logo>
			</view>
			<u-action-sheet :list="locales" @click="setLang" v-model="showlang_action" :cancel-btn="true"
				:cancel-text="$t('取消')"></u-action-sheet>
			<view class="flxd-img-0" @click="showlang" id="guildLang">
				<text>{{$t('请选择国家/地区')}}</text>
			</view>
		</div>
		<div class="bottom">
			<div class="bottom-left">
				<logo></logo>
			</div>
			<div class="bottom-right">
				<view class="bottom-title">
					Path Box
				</view>
				<view class="bottom-describe">
					no empty package, assured to obtain
				</view>
			</div>
		</div>
    </view>
  </view>
</template>
<script>
import logo from "@/components/logo.vue";
export default {
	components: {
		logo
	},
	data() {
		return {
			appName: "",
			app_logo: "",
			showlang_action: false, //切换多语言
		};
	},
	onReady() {
		// #ifdef APP-PLUS
		//获取安装的参数;
		sharetrace.getInstallTrace((data) => {
		  this.share_ma = data.data.paramsData.split("=")[1] || "";
		});
		// #endif
	},
	onLoad(option) {
		this.getHeight();
	},
	onShow() {
		this.getName();
	},
	computed: {
		locales() {
			return [{
					text: this.$t('中文'),
					code: 'zh-cn'
				},
				{
					text: this.$t('英文'),
					code: 'en'
				},
				{
					text: this.$t('巴西'),
					code: 'br'
				},
				// {
				// 	text: this.$t('印度'),
				// 	code: 'in'
				// },
				{
					text: this.$t('泰语'),
					code: 'tl'
				}
			]
		},
	},
	methods: {
		bindPickerChange(e) {
			this.index = e.detail.value
		},
		/* 程序 */
		getName() {
			this.$http({
				url: "api/common/get_general",
			})
			.then((res) => {
				if (res.data.code == 1) {
				  this.appName = res.data.data.app_name;
				  this.app_logo = res.data.data.app_logo;
				}
			})
			.catch((err) => { });
		},
		// 多语言切换
		async setLang(e) {
			this.showlang_action = false;
			this.$i18n.locale = this.locales[e].code;
			await this.getDomain(this.locales[e].code);
			uni.setStorageSync('mhlanguage', this.locales[e].code);
			//setLocale会重启app
			// uni.setLocale(this.locales[e].code);
			//刷新当前页面需要强制刷新接口请求
			setTimeout(() => {
				uni.reLaunch({
					url: "/pages/tabBar/home",
				});
			}, 200)
			// this.$router.go(0);
			console.log('tab', this.locales[e].code);
		},
		showlang() {
			this.showlang_action = true
		},
		close() {
			uni.switchTab({
				url: "/pages/tabBar/home",
			});
		},
		//获取ip
		getIp() {
			this.$http({
				url: "api/Ios/get_ip",
			})
			.then((res) => {
				if (res.data.code == 1) {
					//res.data.data.ip
					return res.data.data.clear;
				}
			})
			.catch((err) => { });
		},
		// 获取域名
		async getDomain(lang) {
			return new Promise((resolve,reject) => {
				this.$http({
					url: "language/domain",
					method: 'GET',
					data: {
						"lang": lang
					}
				})
				.then((res) => {
					if (res.data.data.domain) {
						uni.setStorageSync("languageDomain",res.data.data.domain + "/");
					}
					resolve(res.data.data.domain)
				}).catch((err) => {
					reject(err);
				});
			})
		},
		/* 获取高度 */
		getHeight() {
			let _that = this;
			uni.getSystemInfo({
			success: function (e) {
				let StatusBar = 0,
					CustomBar = 0,
					CustomVal = 0,
					StatusBarRpx = 0,
					CustomBarRpx = 0,
					unitRatioVal = 0;
				// #ifndef MP
				StatusBar = e.statusBarHeight;
				if (e.platform == "android") {
					CustomBar = e.statusBarHeight + 50;
				} else {
					CustomBar = e.statusBarHeight + 45;
				}
				// #endif
				// #ifdef MP-WEIXIN
				StatusBar = e.statusBarHeight;
				let custom = wx.getMenuButtonBoundingClientRect();
				CustomVal = custom;
				CustomBar = custom.bottom + custom.top - e.statusBarHeight;
				// #endif
				// #ifdef MP-ALIPAY
				StatusBar = e.statusBarHeight;
				CustomBar = e.statusBarHeight + e.titleBarHeight;
				// #endif
				let unitRatio = 750 / uni.getSystemInfoSync().windowWidth;
				StatusBarRpx = StatusBar * unitRatio;
				CustomBarRpx = CustomBar * unitRatio;
				unitRatioVal = unitRatio;
				_that.StatusBar = StatusBar; //状态栏高度(px)
				_that.CustomBar = CustomBar; //整个标题栏高度(px)
				_that.StatusBarRpx = StatusBarRpx; //状态栏高度(rpx)
				_that.CustomBarRpx = CustomBarRpx; //整个标题栏高度(rpx)
			},
		});
	},
  },
};
</script>

<style lang="scss" scoped>
.content-page {
	display: flex;
	flex-direction: column;
	height: 100vh;
	background: linear-gradient(#DFE3FB, #F6FAFC);
	background-size: 100% 100%;
}

.header-nav {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	padding: 0 30rpx;
	box-sizing: border-box;
}

.login-content {
	width: 750rpx;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	flex-flow: column;
	justify-content: space-between;
	overflow: hidden;
	// margin-top: 100rpx;
	.login-content-0 {
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	.login-content-1 {
		width: 180rpx;
		height: 180rpx;
		padding-top: 50rpx;
		box-sizing: content-box;
	}
	.flxd-img-0 {
		background: #FFF;
		width: 80%;
		padding: 30rpx;
		border-radius: 10rpx;
		margin-top: 50rpx;
	}
}
.bottom {
	display: flex;
	padding-bottom: 82rpx;
	.bottom-left {
		width: 80rpx;
		height: 80rpx;
		align-items: center;
	}
	.bottom-right {
		font-family: '黑体', 'Helvetica Neue', Arial, sans-serif;
		margin-left: 28rpx;
		.bottom-title {
			font-size: 80rpx;
			line-height: 80rpx;
			font-weight: bolder;
		}
		.bottom-describe {
			font-size: 24rpx;
			line-height: 42rpx;
		}
	}
}
</style>
